import React, { useState } from 'react';
import { Modal, Card, Tag } from 'antd';

import {
  EyeOutlined,
  ContactsOutlined,
  ClusterOutlined,
  HomeOutlined,
  UserOutlined,
} from '@ant-design/icons';

import styles from './detail.less';

export default (props: any) => {
  const { userData } = props;
  // console.log(userData);

  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  //  渲染用户信息
  const renderUserInfo = ({
    deptName,
    roleName,
    email,
    lastLoginTime,
    mobile,
    status,
    ssex,
    createTime,
  }: Partial<any>) => {
    let color, sex;
    status === '1' ? (color = 'green') : (color = 'red');

    switch (ssex) {
      case '1':
        sex = '男';
        break;
      case '0':
        sex = '女';
        break;
      default:
        sex = '保密';
        break;
    }

    return (
      <div className={styles.detail}>
        <div className={styles.box}>
          <p>
            <ContactsOutlined
              style={{
                marginRight: 8,
              }}
            />
            部门：{deptName}
          </p>
          <p>
            <ClusterOutlined
              style={{
                marginRight: 8,
              }}
            />
            角色：{roleName}
          </p>
          <p>
            <HomeOutlined
              style={{
                marginRight: 8,
              }}
            />
            邮箱地址：{email}
          </p>
          <p>
            <HomeOutlined
              style={{
                marginRight: 8,
              }}
            />
            上次登录：{lastLoginTime}
          </p>
        </div>
        <div className={styles.box}>
          <p>
            <ContactsOutlined
              style={{
                marginRight: 8,
              }}
            />
            手机：{mobile}
          </p>
          <p>
            <ClusterOutlined
              style={{
                marginRight: 8,
              }}
            />
            状态：<Tag color={color}>{status == '1' ? '有效' : '锁定'}</Tag>
          </p>
          <p>
            <HomeOutlined
              style={{
                marginRight: 8,
              }}
            />
            性别：{sex}
          </p>
          <p>
            <HomeOutlined
              style={{
                marginRight: 8,
              }}
            />
            创建时间：{createTime}
          </p>
        </div>
      </div>
    );
  };

  return (
    <>
      <EyeOutlined
        style={{ color: 'green', marginLeft: '15px' }}
        onClick={() => {
          setIsModalVisible(true);
        }}
      />
      <Modal
        width={653}
        // title="用户信息"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Card bordered={false} style={{ marginBottom: 24 }}>
          <div className={styles.container}>
            <div className={styles.avatarHolder}>
              <img
                src={
                  userData.avatar
                    ? 'http://xawn.f3322.net:8002/dist/static/avatar/' +
                      userData.avatar
                    : 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
                }
              />
              <div className={styles.name}>用户名：{userData.username}</div>
              <div>{userData?.signature}</div>
            </div>
            <div>{renderUserInfo(userData)}</div>
          </div>
        </Card>
      </Modal>
    </>
  );
};
